<template>
  <div class="vue-country-intl-schema-popover" ref="popoverContainer" :id="id">
    <slot></slot>
    <teleport to="body">
      <transition :name="transitionName">
        <div
          v-if="popoverDisplay"
          v-show="visible"
          class="vue-country-intl-popover"
          :class="[{'list-on-top': !listOnBottom, 'list-on-bottom': listOnBottom}, popoverClass]"
          ref="popover"
          :style="{left: popoverPosition.left, top: popoverPosition.top, maxWidth: popoverMaxWidth}">
          <div class="search-input-box">
            <input type="text" class="search-input" autocomplete="off" v-model="searchText"
                   :placeholder="searchInputPlaceholder">
          </div>
          <country-list
            ref="countryList"
            :model-value="modelValue"
            :search-text="searchText"
            :selectedText="selectedText"
            :show-selected-text="showSelectedText"
            :show-area-code="showAreaCode"
            :list-z-index="listZIndex"
            :type="type"
            :iso2="iso2"
            :search-able="searchAble"
            :disable-country="disableCountry"
            :only-country="onlyCountry"
            :no-data-text="noDataText"
            :use-chinese="useChinese"
            @update:modelValue="onModelValueChange"
            @onChange="onCountryChange">
            <template #vueCountryNoData><slot name="vueCountryNoData"></slot></template>
            <template #selected><slot name="selected"></slot></template>
          </country-list>
          <div class="vue-country-intl-popover-arrow"></div>
        </div>
      </transition>
    </teleport>
  </div>
</template>

<script>
import index from './schema-popover';

export default index;
</script>

<style>
@import "schema-popover.css";
</style>
